$(function () {
  // console.log(111);
  // 1.0 获取地址栏上面的查询参数
  const search = location.search;
  // console.log(search);
  // 获取查询参数对象
  const obj = new URLSearchParams(search);
  // console.log(obj);
  // 在对象中提取id值
  const id = obj.get("id");
  // console.log(id);

  // 获取所有文章列表，渲染到编辑页面的文章类别
  $.ajax({
    method: "GET",
    url: BigNew.category_list,
    success: (res) => {
      // console.log(res);
      const htmlStr = template("cateItem", { list: res.data });
      $(".category").html(htmlStr);
    },
  });

  // 2.0 根据id获取文章信息
  $.ajax({
    method: "GET",
    url: BigNew.article_search,
    data: { id },
    success: (res) => {
      console.log(res.data);
      const {
        author,
        categoryId,
        content,
        cover,
        date,
        id,
        state,
        title,
      } = res.data;
      $("#inputTitle").val(title);
      $(".article_cover").prop("src", cover);
      $(".category").val(categoryId);
      // console.log($(".category").val());
      $('[name="date"]').val(date);
      // 方法1
      $('[name="content"]').val(content);

      // 方法2：利用富文本编辑器获取文章内容
      // 注意：由于富文本编辑器加载需要时间，所以要给富文本编辑器设置内容的代码要延后一些时间执行
      /* setInterval(() => {
        tinymce.activeEditor.setContent(content);
      }, 1500); */
    },
  });

  // 3.0 加载日期插件
  jeDate("#date", {
    // 事件触发：可绑定一个或多个事件
    trigger: "click",
    theme: { bgcolor: "#00A680", pnColor: "#00DDAA" }, //绿色主题
    format: "YYYY-MM-DD", // 时间格式
    // 是否设置初始值（现在的时间）
    isinitVal: false,
  });

  // 4.0 文本编辑器
  tinymce.init({
    selector: "#content",
    height: "350px",
    language: "zh_CN",
    directionality: "ltr",
    browser_spellcheck: true,
    contextmenu: false,
    plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table contextmenu paste imagetools wordcount",
      "code",
    ],
    toolbar:
      "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code",
  });

  // 5.0 文章封面修改
  $("#inputCover").change(() => {
    // console.log($("#inputCover").get(0).files[0]);
    // 获取图片路径对象
    const fileObj = $("#inputCover").get(0).files[0];
    // 把路径对象转成可识别的路径
    const url = URL.createObjectURL(fileObj);
    console.log(url);
    $(".article_cover").prop({ src: url });
  });

  // 6.0 修改和存草稿提交
  $('[type="submit"]').click(function (e) {
    // 阻止默认行为
    e.preventDefault();

    // ajax请求需要的 7个参数
    const state = $(this).attr("data-state");
    // console.log(state);

    const fd = new FormData(document.querySelector("#form"));
    fd.append("id", id);
    // 富文本编辑器添加到 fd  中
    const content = tinymce.activeEditor.getContent();
    // 把文本编辑器中的内容重新赋值给content
    fd.set("content", content);
    fd.forEach((value, key) => {
      console.log(value, key);
    });

    // ajax请求
    $.ajax({
      url: BigNew.article_edit,
      method: "POST",
      data: fd,
      contentType: false,
      processData: false,
      success: (res) => {
        console.log(res);
        if (res.code === 200) {
          alert(res.msg);
          location.href = "./article_list.html";
        }
      },
    });
  });
});
